/* 内河涌 弹框 水质情况页
 * @ 劳兆城
 * @ 2017-8-11*/

<template>
	<div class="water-quality clear">
		<div class="water-quality-table pull-left">
			<div class="table">
				<Table
					@on-row-click="rowClick"
					:columns="table.thead"
					:data="table.tbody"
					size="small"
					highlight-row
					border></Table>
			</div>
			<div class="page">
				<Page
					:total="table.total"
					@on-change="pageChange"
					size="small"
					show-total></Page>
			</div>
		</div>
		<div class="water-quality-content pull-left">
			<div class="water-quality-info">
				<header class="water-quality-content-header clear">
					<div
						class="title pull-left">检验结果录入</div>
					<div class="pull-right">
						<Button
							@click.native="_addQualityClick"
							type="text" size="small"
							style="font-size: 12px;">新增检验</Button>
						<Button
							@click.native="saveQualityClick"
							:disabled="!canSave"
							type="text"
							size="small"
							style="font-size: 12px;">保存</Button>
					</div>
				</header>
				<div class="water-quality-info-content">
					<div class="quality-box">
						<div class="quality-row">
							<div class="quality-title">水质分类</div>
							<div class="quality-content">
								<Select v-model="water.watertype" size="small" placeholder="请选择">
									<Option value="10" key="10">I类</Option>
									<Option value="20" key="20">II类</Option>
									<Option value="30" key="30">III类</Option>
									<Option value="40" key="40">IV类</Option>
									<Option value="50" key="50">V类</Option>
									<Option value="60" key="60">劣V类</Option>
								</Select>
							</div>
						</div>
						<div class="quality-row">
							<div class="quality-title">取样日期</div>
							<div class="quality-content">
								<Date-picker
									:value="water.pntdate"
									@on-change="dateChange"
									size="small"
									type="date"
									placeholder="选择日期"></Date-picker>
							</div>
						</div>
						<div class="quality-row">
							<div class="quality-title">检测员</div>
							<div class="quality-content">
								<Input v-model="water.handleman" placeholder="请输入" size="small"></Input>
							</div>
						</div>
						<div class="quality-row">
							<div class="quality-title">登记员</div>
							<div class="quality-content">
								<Input v-model="water.bookman" placeholder="请输入" size="small"></Input>
							</div>
						</div>
					</div>
					<div class="quality-box">
						<div class="quality-row">
							<div class="quality-title">水质总体评价</div>
							<div class="quality-content">
								<Input v-model="water.waterdesc" size="small" type="textarea" class="water-textarea" placeholder="请输入"></Input>
							</div>
						</div>
					</div>
					<div class="quality-box">
						<div class="quality-row">
							<div class="quality-title">检验备注</div>
							<div class="quality-content">
								<Input v-model="water.pntcomment" size="small" type="textarea" class="water-textarea" placeholder="请输入"></Input>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="water-quality-legend">
				<header class="water-quality-content-header clear">
					<div
						class="title pull-left">取样结果列表</div>
					<div class="pull-right">
						<Button
							@click.native="_addQualityLegendClick"
							type="text" size="small"
							:disabled="!canSave"
							style="font-size: 12px;">添加取样</Button>
					</div>
				</header>
				<div class="water-quality-legend-content">
					<Table
						:columns="legendTable.thead"
						:data="legendTable.tbody"
						height="293"
						size="small"
						highlight-row
						border></Table>
				</div>
			</div>
		</div>
		<custom-model ref="custom-model" class="water-quality-model" title="编辑">
			<div class="quality-box water-quality-model-box">
				<div class="quality-row">
					<div class="quality-title quality-legend-title">{{waterLegend.waterkey}}</div>
					<div class="quality-content">
						<Input v-model="waterLegend.leftvalue" placeholder="请输入"></Input>
					</div>
				</div>
			</div>
			<div class="water-quality-model-button pull-right">
				<Button type="primary" @click="_saveQualityLegendClick">提交</Button>
			</div>
		</custom-model>
	</div>
</template>

<script>
	import customModel from './customModel.vue'
import { singleWaterNetQuality, singleWaterNetQualityLegend } from 'common/js/table'
import { successNotice, errorNotice } from 'common/js/dom'
import { filterWaterQualityLegend } from 'common/js/module'
import { ERR_OK } from 'api/config'
import { getWaterQuality, addWaterQuality, editWaterQuality, delWaterQuality, getWaterQualityLegend, addWaterQualityLegend, editWaterQualityLegend, delWaterQualityLegend } from 'api/aPicture'

export default {
		components: {
			'custom-model': customModel
		},
		computed: {
			canSave () {
				return JSON.stringify(this.water) !== '{}'
		}
		},
		created () {
			this.page = 1

		this._getWaterQuality()
	},
		data () {
			return {
				water: {},
				waterLegend: {},
				table: {
					thead: singleWaterNetQuality(this),
					tbody: [],
					total: null
				},
				legendTable: {
					thead: singleWaterNetQualityLegend(this),
					tbody: []
				}
			}
		},
		methods: {
			dateChange (time) {
				this.water.pntdate = time
		},
			rowClick (row) {
				this.water = row
			this._getWaterQualityLegend(row.wtwaterpntid)
		},
			pageChange (page) {
				this.page = page
			this._getWaterQuality(page)
		},
			_saveQualityLegend (row) {
				this.waterLegend = row
			this.$refs['custom-model'].showModel()
		},
			_saveQualityClick () {
				editWaterQuality(this.water).then(res => {
					if (res.code === ERR_OK) {
						successNotice('保存成功')
					this._getWaterQuality(this.page)
				} else {
						errorNotice('保存失败')
				}
				})
			},
			_addQualityClick () {
				addWaterQuality().then(res => {
					if (res.code === ERR_OK) {
						successNotice('新增成功')
					this._getWaterQuality(this.page)
				} else {
						errorNotice('新增失败')
				}
				})
			},
			_delQualityClick (row) {
				delWaterQuality(row.wtwaterpntid).then(res => {
					if (res.code === ERR_OK) {
						successNotice('删除成功')
					this._getWaterQuality(this.page)
					this.water = {}
					this.legendTable.tbody = []
				} else {
						errorNotice('删除失败')
				}
				})
			},
			_getWaterQuality (page) {
				getWaterQuality(page).then(res => {
					if (res.code === ERR_OK) {
						this.table.tbody = res.result.result
					this.table.total = res.result.totalSize
				}
				})
			},
			_saveQualityLegendClick () {
				editWaterQualityLegend(this.waterLegend).then(res => {
					if (res.code === ERR_OK) {
						successNotice('保存成功')
					this._getWaterQuality(this.page)
					this.$refs['custom-model'].hideModel()
				} else {
						errorNotice('保存失败')
				}
				})
			},
			_addQualityLegendClick (id) {
				addWaterQualityLegend(this.water.wtwaterpntid).then(res => {
					if (res.code === ERR_OK) {
						successNotice('新增成功')
					this._getWaterQualityLegend(this.water.wtwaterpntid)
				} else {
						errorNotice('新增失败')
				}
				})
			},
			_delLegendClick (index) {
				let arr = []
			for (var i = 0; i < 8; i++) {
					arr.push(this.legendTable.tbody[index + i]._id)
			}
				delWaterQualityLegend(arr).then(res => {
					if (res.code === ERR_OK) {
						successNotice('删除成功')
					this._getWaterQualityLegend(this.water.wtwaterpntid)
				} else {
						errorNotice('删除失败')
				}
				})
			},
			_getWaterQualityLegend (id) {
				getWaterQualityLegend(id).then(res => {
					if (res.code === ERR_OK) {
						this.legendTable.tbody = filterWaterQualityLegend(res.result.result)
				}
				})
			}
		}
	}
</script>

<style lang="scss">
	.singleWaterNet-model {
		.water-quality {
			width: 100%;
			height: 100%;
			padding: 0 5px 5px;
			.water-quality-table {
				width: 23%;
				height: 100%;
				position: relative;
				.table {
					width: 100%;
					position: absolute;
					top: 0;
					left: 0;
				}
				.page {
					position: absolute;
					bottom: 5px;
					right: 5px;
				}
			}
			.water-quality-content {
				width: calc(77% - 5px);
				height: 100%;
				margin-left: 5px;
				.water-quality-info {
					width: 100%;
					height: 35%;
					border: 1px solid #e9eaec;
					border-radius: 5px 5px 0 0;
					overflow: hidden;
				}
				.water-quality-legend {
					width: 100%;
					height: calc(65% - 5px);
					margin-top: 5px;
					border: 1px solid #e9eaec;
					border-radius: 5px 5px 0 0;
					overflow: hidden;
					.water-quality-legend-content {
						padding: 5px;
					}
				}
				.water-quality-content-header {
					width: 100%;
					height: 25px;
					font-size: 12px;
				    padding-left: 10px;
				    background-color: #f8f8f9;
				    border-bottom: 1px solid #e9eaec;
				    color: #495060;
				    .title {
				    	margin-top: 4px;
				    }
				}
			}
			.water-quality-model {
				.custom-model-info {
					width: 290px;
					height: 170px;
					.water-quality-model-box {
						padding-top: 20px;
						padding-right: 10px;
					}
					.water-quality-model-button {
						padding-top: 20px;
						padding-right: 10px;
					}
				}
			}
			.quality-box {
				display: flex;
				margin: 5px 0;
				.quality-row {
					flex: 1;
					display: flex;
					align-items: center;
					.quality-title {
						width: 60px;
						font-size: 12px;
						text-align: right;
						padding-right: 5px;
						margin-top: 2px;
					}
					.quality-legend-title {
						width: 90px;
					}
					.quality-content {
						flex: 1;
					}
				}
			}
		}
	}
</style>
